<template>
  <div>
    <a-card :bordered="false" style="position: relative; margin-bottom: 10px" :style="{ paddingTop: closeTip ? '20px' : '0' }">
      <div
        class="ant-alert ant-alert-info"
        style="position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between"
        v-if="closeTip"
      >
        <div>
          <a style="font-weight: 600">
            <a-icon type="info-circle" /></a>&nbsp;&nbsp; 
            提示：短信包已不足<a style="font-weight: 600;color: #d9001b;">{{notePackNum}}/条</a>，请及时充值！
        </div>
        <div>
          <a-icon class="close" type="close" @click="closeTip = !closeTip" />
        </div>
      </div>
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" style="position: relative">
        <div class="search-wrapper-btn">
          <a-button type="link" @click="show = !show">
            <span v-if="!show">展开<a-icon type="down" /></span>
            <span v-else>收起<a-icon type="up" /></span>
          </a-button>
        </div>
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <div class="mode_item mode_item_flex">
            <div class="mode_item_div">
              <a-form-model-item label="发送时间" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
                <!-- <a-range-picker
                  :allowClear="true"
                  v-model="rangePickerTime"
                  valueFormat="YYYY-MM-DD"
                  @change="rangePickerChange"
                /> -->
                <span class="date-range-picker">
                  <a-date-picker
                    v-model="form.noteStartTime"
                    placeholder="开始日期"
                    :disabled-date="disabledStartDate"
                    valueFormat="YYYY-MM-DD"
                    @openChange="handleOpenChange($event, 'start')"
                  />
                  <span class="line">-</span>
                  <a-date-picker
                    v-model="form.noteEndTime"
                    placeholder="结束日期"
                    :disabled-date="disabledEndDate"
                    valueFormat="YYYY-MM-DD"
                    :open="endOpen"
                    @openChange="handleOpenChange($event, 'end')"
                  />
                </span>
              </a-form-model-item>
            </div>
            <div class="mode_item_div">
              <a-form-model-item label="受害人手机号">
                <a-input v-model="form.msisdn" placeholder="请输入" />
              </a-form-model-item>
            </div>
            <div class="mode_item_div">
              <a-form-model-item label="导入批次" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
                <a-input v-model="form.importBatch" placeholder="请输入" />
              </a-form-model-item>
            </div>
          </div>
          <div class="mode_item mode_item_flex" v-show="show">
            <div class="mode_item_div">
              <a-form-model-item label="格式判断" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
                <j-search-select-tag placeholder="请选择" v-model="form.format" :dictOptions="formatOptions" />
              </a-form-model-item>
            </div>
            <div class="mode_item_div">
              <a-form-model-item label="短信发送状态">
                <j-search-select-tag placeholder="请选择" v-model="form.smsDissuadeStatus" :dictOptions="smsDissuadeStatusOptions" />
              </a-form-model-item>
            </div>
            <div class="mode_item_div">
              <a-form-model-item label="操作账号" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
                <a-input v-model="form.operatingName" placeholder="请输入" />
              </a-form-model-item>
            </div>
          </div>
          <div style="width: 36%; margin-top: 20px">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button type="primary" @click="onQuery"> 查询 </a-button>
              <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
            </a-form-model-item>
          </div>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!--操作按钮区域-->
      <div class="table-operator">
        <div>
          <a-button type="primary" @click="handleModal()">导入</a-button>
          <a-button @click="handleExportXls()" :loading="confirmLoading">导出</a-button>
          <a-button @click="handleSend()">重新发送</a-button>
        </div>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <custom-table
          ref="table"
          rowKey="id"
          :showColSettings="false"
          :showAlert="false"
          :showSelection="true"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @selectedRowKey="onSelectedRow"
          @change="onTableChange"
        >
          <template slot="customIsFormat">
            格式判断
            <a-tooltip placement="leftTop">
              <template slot="title">
                <span>导入的手机号进行格式判断；</span>
              </template>
              <a-icon type="question-circle" />
            </a-tooltip>
          </template>
          <template slot="smsDissuadeStatus" slot-scope="text">
            <span v-if="text==2">发送成功</span>
            <span v-if="text==3">发送失败</span>
            <span v-if="text==4" style="color: #d9001b">未发送</span>
            <span v-if="text==5" style="color: #d9001b">发送中</span>
          </template>
          <!--操作-->
          <template slot="action" slot-scope="text, record">
            <a-button @click="handleSend(record)" type="link">发送短信</a-button>
          </template>
        </custom-table>
      </div>
      <!--弹窗区域 -->
      <handle-modal v-if="handleModalBool" ref="handleModal" @ok="modalFormOk" @close="modalFormClose" />
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import * as noteApi from '@/api/modules/note.js'
import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'
import { downLoadMix } from '@/utils/export-util/util'
import CustomTable from '@/components/zxd/Table/CustomTable'
import HandleModal from './modules/handleModal'

export default {
  components: {
    CustomTable,
    HandleModal,
  },
  mixins: [DisabledAuthFilterMixin],
  data() {
    return {
      moment,
      labelCol: { span: 6 },
      wrapperCol: { span: 17 },
      rangePickerTime: [],
      endOpen: false,
      show: false,
      closeTip: false,
      loading: false,
      visible: false,
      handleModalBool: false,
      confirmLoading: false,
      isDisabled: true,
      notePackNum: 0,
      formatOptions: [
        { text: '有效', value: '1', },
        { text: '无效', value: '2', }
      ],
      smsDissuadeStatusOptions: [
        { text: '全部', value: '1', },
        { text: '发送成功', value: '2', },
        { text: '发送失败', value: '3', },
        { text: '未发送', value: '4', },
        { text: '发送中', value: '5', },
      ],
      selectKeys: [],
      form: {},
      columns: [
        {
          title: '受害人手机号码',
          dataIndex: 'msisdn',
          width: 110,
          align: 'center',
        },
        {
          // title: "格式判断",
          columnTitle: '格式判断',
          dataIndex: 'format',
          width: 110,
          align: 'center',
          slots: { title: 'customIsFormat' },
          customRender: (text, record) => {
            //格式判断无效标红
            return text === 1 ? '有效' : '无效'
          },
        },
        {
          title: '导入批次',
          dataIndex: 'importBatch',
          width: 140,
          align: 'center',
          customRender: (text, record) => {
            return  <j-ellipsis value={text} length={20} />
          }
        },
        {
          title: '导入时间',
          dataIndex: 'importTime',
          width: 180,
          align: 'center',
        },
        {
          title: '短信发送状态',
          dataIndex: 'smsDissuadeStatus',
          width: 90,
          align: 'center',
          scopedSlots: { customRender: 'smsDissuadeStatus' },
        },
        {
          title: '发送时间',
          dataIndex: 'sendTime',
          width: 180,
          align: 'center',
        },
        {
          title: '操作账号',
          dataIndex: 'operatingName',
          width: 100,
          align: 'center',
        },
        {
          title: '操作',
          width: 100,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
    }
  },
  async mounted() {
    this.getNotePackageNum()
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.form = {}
      this.rangePickerTime = []
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      noteApi
        .getList(form)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
            this.$refs.table.onClearRowKeys()
          } else {
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    getNotePackageNum() {
      noteApi
        .notePackageNum()
        .then((res) => {
          if (res.success) {
            this.notePackNum = res.result?res.result:0
          }
        })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
    // 发送时间
    rangePickerChange(date) {
      this.$set(this.form, 'noteStartTime', date[0])
      this.$set(this.form, 'noteEndTime', date[1])
    },
    modalFormOk() {
      this.handleModalBool = false
      // 成功时，重载列表
      this.refreshTable()
      // 成功时，重载短信包
      this.getNotePackageNum()
      // 清空列表选中
      this.$refs.table.onClearRowKeys()
    },
    modalFormClose() {
      this.handleModalBool = false
    },
    handleModal() {
      this.handleModalBool = true
      this.$nextTick(()=>{
        this.$refs.handleModal.add()
      })
    },
    handleExportXls() {
      this.confirmLoading = true
      let selectList = this.$refs.table.getSelectedRows()
      let obj = {
        idList: selectList.map(v=>v.id),
        noteFastSendQueryVO: this.form
      }
      noteApi.exportXls(obj).then(async res => {
        if(res && res.size>0) {
          const fileName = '短信速送.xls'
          await downLoadMix(res, fileName)
          this.confirmLoading = false
        } else {
          this.$message.warn("导出失败！")
        }
      })
    },
    // 发送操作
    handleSend(record) {
      let datas=[]
      if (record) {
        datas = [record.id]
      } else {
        let selectList = this.$refs.table.getSelectedRows()
        datas = selectList.map(v=>v.id)
      }
      this.handleModalBool = true
      this.$nextTick(()=>{
        this.$refs.handleModal.edit({noteFastSendQueryVO: this.form, idList: datas})
        this.$refs.handleModal.importStep=3
      })
    },
    // 发送时间-自定义开始日期【不可选择的日期】
    disabledStartDate(startValue) {
      const endValue = Object.keys(this.form).length > 0 && this.form.noteEndTime
        ? this.$JMoment(this.form.noteEndTime) : null
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf()
    },
    // 发送时间-自定义结束日期【不可选择的日期】
    disabledEndDate(endValue) {
      const startValue = Object.keys(this.form).length > 0 && this.form.noteStartTime
      ? this.$JMoment(this.form.noteStartTime) : null
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() >= endValue.valueOf()
    },
    // 发送时间-自定义日期【控制弹层是否展开】
    handleOpenChange(open, status) {
      if (status==='start' && !open) {
        this.endOpen = true
      }
      if (status==='end') {
        this.endOpen = open
      }
    }
  }
}
</script>
<style lang="less" scoped>
.form-item-label {
  /deep/.ant-form-item-label {
    width: 80px;
  }
}
.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;
  .mode_item_div {
    width: 30%;
    padding: 5px 0;
    .ant-form-item {
      margin-bottom: 0;
    }
  }
  & > * {
    width: 100%;
    margin-bottom: 0;
    padding: 10px 0;
  }
}
.search-wrapper-btn {
  position: absolute;
  right: 0;
  top: 15px;
  z-index: 100;
}
/deep/.table-operator {
  display: flex;
  justify-content: space-between;
}
/deep/.table-custom-cols {
  top: -48px !important;
}
.custom-ewm {
  padding: 14px;
  background-color: #fff;
  border: 1px #ccc solid;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
/deep/.ant-dropdown-menu-item {
  text-align: center;
  border-bottom: 1px #f5f5f5 solid;
  &:last-child {
    border-bottom: 0;
  }
}
/deep/.anticon.anticon-down {
  font-size: 14px !important;
}

.table-page-content {
  /deep/.ant-table-thead > tr > th,
  /deep/.ant-table-tbody > tr > td {
    padding-left: 0;
    padding-right: 0;
  }
  /deep/.ant-table-thead > tr:first-child > th:first-child,
  /deep/.ant-table-tbody > tr > td:first-child {
    padding-left: 10px;
  }
  .text_color_1 {
    color: #02a7f0;
    padding-right: 6px;
  }
  .text_color_2 {
    color: #f59a23;
    padding-right: 6px;
  }
  .text_color_3 {
    color: #d9001b;
    padding-right: 6px;
  }
  .ant-tag-cust-green {
    background-color: #f2fee6;
    border-color: #c2fa90;
  }
  .ant-tag.ant-tag-level {
    display: block;
    font-size: 14px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: 0;
    &.level_1 {
      color: #3fb674;
      background-color: #e4fff0;
    }
    &.level_2 {
      color: #56acf2;
      background-color: #dceefd;
    }
    &.level_3 {
      color: #f9b01e;
      background-color: #fef3dc;
    }
    &.level_4 {
      color: #fd586c;
      background-color: #ffe9e7;
    }
    &.level_5 {
      color: #b40aba;
      background-color: #fecdff;
    }
  }
}

.date-range-picker {
  // width: 280px;
  display: inline-flex;
  align-items: center;
  .ant-calendar-picker {
    min-width: 47% !important;
  }
  .line {
    padding: 0 4px;
  }
}
</style>
